<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="stylesheet" href="/print/_css/recipe.css" />
    <title>西药处方打印</title>
  </head> 

  <body>
    <div id="app">
      <div v-for="(item,index) in list" :key="index" class="significance-box">
        <div class="top-head">
          <div class="left">
            <img :src="hospital.logo" alt="" />
          </div>
          <div class="middle">{{ item.title }}</div>
          <div class="right">
            <div class="drug-type">{{item.typeName}}</div>
          </div>
        </div>
        <div class="user-info">
          <div class="left">
            <table border="0" width="100%">
              <tr>
                <td>病历号：{{ userInfo.cureCode }}</td>
                <td>科室：{{ userInfo.deptName }}</td>
                <td>费别：非医保</td>
              </tr>
              <tr>
                <td>姓名：{{ userInfo.patientName }}</td>
                <td>性别：
                  {{userInfo.sex ==1?'男':(userInfo.sex ==2?'女':'不详')}}
                </td>
                <td>
                  年龄：{{ userInfo.age }}岁
                </td>
              </tr>
              <!-- <tr>
                <td colspan="2">地址：skdgjdlksgjsaldkfjl</td>
                <td colspan="2">皮试结果：暂无不良反应</td>
              </tr> -->
            </table>
          </div>
          <div class="right">
            <img
              class="img-erweima"
              width="100%"
              height="100%"
              :src="barCode"
              alt=""
            />
          </div>
        </div>
        <div class="nr-box">
          <div class="nr-left">
            <div class="nr-zhenduan">
              <div>临床(初步)诊断：</div>
              <div style="margin-top:2mm;">{{ zd }}</div>
            </div>
            <div class="nr-guomishi">
              <div>过敏史：</div>
              <div style="margin-top:2mm;">{{ gms }}</div>
            </div>
          </div>
          <div class="nr-right">
            <div class="rp-box">Rp</div>
            <div class="nr-table">
              <table border="0" width="100%">
                <tr class="table-title">
                  <td>组号</td>
                  <td>药品名</td>
                  <td>规格</td>
                  <td>用法</td>
                  <td>总量</td>
                </tr>
                <tr
                  v-for="(item2,index2) in item.list"
                  :key="index2"
                  class="tr-item"
                >
                  <td>{{ item2.groupNo }}</td>
                  <td>{{ item2.drugName }}</td>
                  <td>{{ item2.specsDisplay }}</td>
                  <td>{{ item2.useDisplay }}</td>
                  <td>{{ item2.totalDisplay }}</td>
                </tr>
              </table>
            </div>
            <table border="0" width="100%">
              <tr>
                <td style="font-size:4mm;">医生签名：</td>
                <td style="text-align: right;">
                  开单时间：{{ createTime }}
                </td>
              </tr>
            </table>
          </div>
        </div>
        <table border="0" width="100%" style="margin-top:2mm;">
          <tr>
            <td>药品总价：{{ item.sellMoney }}元</td>
            <td>药师审核：</td>
            <td>配药药师：</td>
            <td>核对发药：</td>
          </tr>
        </table>

        <div class="bottom">
          注：请勿遗失，处方只有当日有效，请妥善保管，报销时作核对凭证（非打印无效）
        </div>
      </div>
    </div>
    <!-- built files will be auto injected -->
    <script src="https://lib.baomitu.com/vue/2.6.10/vue.min.js"></script>
    <script>
      new Vue({
        data: {
          list: [],
          hospital: {
            logo: "",
            name: ""
          },
          zd: "",
          userInfo: {},
          gms: "",
          createTime: "",
          barCode: "",
          pageSize: 5 //每页打印数量
        },
        mounted() {
          var th = this;
          window.addEventListener(
            "message",
            function(event) {
              var obj = event.data;
              th.hospital = obj.hospital;
              th.zd = obj.firstVisit;
              th.userInfo = obj.basePrintVO;
              th.gms = obj.allergy;
              th.barCode = obj.barCode;
              th.createTime = obj.time;
              th.list = [];
              var totalDrug = obj.drug;
              //循环加将同一组号放在一起
              // for (var index = 0; index < obj.drug.length; index++) {
              //   var element = obj.drug[index];
              //   var trueBo = false; //是否找到同组号
              //   for (var i = 0; i < totalDrug.length; i++) {
              //     var totalDrugItem = totalDrug[i];
              //     if (totalDrugItem.groupNo == element.groupNo) {
              //       trueBo = true;
              //       break;
              //     }
              //   }
              //   if (trueBo) {
              //     totalDrugItem.list.push(element);
              //   } else {
              //     totalDrug.push({ groupNo: element.groupNo, list: [element] });
              //   }
              // }
              if (obj.isOrdinary) {
                th.getPage(totalDrug, "处方单", "西药");
              }
              //判断是否有输液单
              if (obj.isFlow) {
                th.getPage(totalDrug, "输液单", "西药");
              }
              if (obj.isHocus) {
                th.getPage(totalDrug, "麻醉单", "麻");
              }
              th.$nextTick(function() {
                th.isLoadImg();
              });
            },
            false
          );
        },
        methods: {
          //解析处方单子
          getPage(array, title, typeName) {
            var th = this;
            var fn = function(groupArr) {
              var arr = [];
              var list = [];
              var sellMoney = 0;
              //如果是pageSize的倍数就第二页
              for (var index = 0; index < groupArr.length; index++) {
                var item = groupArr[index];
                var priceDisplay = Number.parseFloat(item.priceDisplay);
                sellMoney += priceDisplay;
                arr.push(item);
                var i = index + 1;
                if (i % th.pageSize == 0) {
                  list.push({
                    sellMoney: sellMoney,
                    title: title,
                    list: arr
                  });
                  arr = [];
                  sellMoney = 0;
                }
              }
              if (arr.length > 0) {
                list.push({
                  sellMoney: sellMoney,
                  title: title,
                  list: arr,
                  typeName: typeName
                });
              }
              th.list.push(...list);
            };
            // for (var index = 0; index < array.length; index++) {
            //   var element = array[index];
            //   fn(element.list);
            // }
            fn(array);
          },
          isLoadImg() {
            //这里要判断图片是否加载完成
            var imgs = document.getElementsByTagName("img");
            var timer = setInterval(() => {
              var i = 0;
              for (var index = 0; index < imgs.length; index++) {
                var element = imgs[index];
                if (element.complete) {
                  i++;
                }
              }
              if (i == imgs.length) {
                clearInterval(timer);
                window.print();
              }
            }, 500);
          },
          toTime(time) {
            time = new Date(time);
            var fn = v => {
              if (v < 10) v = "0" + v;
              return v;
            };
            return (
              time.getFullYear() +
              "/" +
              fn(time.getMonth() + 1) +
              "/" +
              fn(time.getDate()) +
              " " +
              fn(time.getHours()) +
              ":" +
              fn(time.getMinutes()) +
              ":" +
              fn(time.getSeconds())
            );
          }
        },
        watch: {},
        filters: {
          toAge(birthday) {
            if (!birthday) return "";
            var now = new Date();
            var year = now.getFullYear();
            var month = now.getMonth() + 1;
            var day = now.getDate();
            var hour = now.getHours();
            var minute = now.getMinutes();
            var second = now.getSeconds();
            var myDate = new Date(birthday);
            var myYear = myDate.getFullYear();
            var myMonth = myDate.getMonth() + 1;
            var myDay = myDate.getDate();
            var myHour = myDate.getHours();
            var myMinute = myDate.getMinutes();
            var mySecond = myDate.getSeconds();
            var isLeapYear = function isLeapYear(year) {
              return (year % 4 == 0 && year % 100 != 0) || year % 400 == 0;
            };
            var getDaysOfMonth = function getDaysOfMonth(dateStr) {
              var date = new Date(dateStr);
              var year = date.getFullYear();
              var mouth = date.getMonth() + 1;
              var day = 0;

              if (mouth == 2) {
                day = isLeapYear(year) ? 29 : 28;
              } else if (
                mouth == 1 ||
                mouth == 3 ||
                mouth == 5 ||
                mouth == 7 ||
                mouth == 8 ||
                mouth == 10 ||
                mouth == 12
              ) {
                day = 31;
              } else {
                day = 30;
              }
              return day;
            };
            var gapSecond = second - mySecond;
            if (gapSecond < 0) {
              minute -= 1;
              gapSecond = 60 - mySecond + second;
            }
            var gapMinute = minute - myMinute;
            if (gapMinute < 0) {
              hour -= 1;
              gapMinute = 60 - myMinute + minute;
            }
            var gapHour = hour - myHour;
            if (gapHour < 0) {
              day -= 1;
              gapHour = 24 - myHour + hour;
            }
            var gapDay = day - myDay;
            if (gapDay < 0) {
              month -= 1;
              gapDay = getDaysOfMonth(birthday) - myDay + day;
            }
            var gapMonth = month - myMonth;
            if (gapMonth < 0) {
              year -= 1;
              gapMonth = 12 - myMonth + month;
            }
            var gapYear = year - myYear;
            if (gapYear < 0) {
              gapYear = 0;
            }
            var dateStr = `${gapYear}岁${gapMonth}月${gapDay}天`;
            // (gapHour<10? ("0"+gapHour): gapHour)+"时 " +
            // (gapMinute<10? ("0"+gapMinute): gapMinute)+"分 " +
            // (gapSecond<10? ("0"+gapSecond): gapSecond)+"秒";

            return dateStr;
          }
        }
      }).$mount("#app");
    </script>
  </body>
</html>
